<template>
  <u-modal :show="visible" :zoom="false" :mask-close-able="maskClosable" :custom-style="modalStyle" @close="close"
    bgColor="transparent">
    <!-- 背景图容器 -->
    <view class="modal-bg-container" :style="bgContainerStyle">
      <image :src="backgroundImage" mode="aspectFill" class="modal-bg-image" v-if="backgroundImage"></image>
    </view>

    <!-- 弹窗内容 -->
    <view class="modal-content" :style="contentStyle">
      <!-- 关闭按钮 -->
      <u-icon name="close" color="#fff" size="24" @click="close" class="close-icon"></u-icon>

      <!-- 标题 -->
      <view class="modal-header">
        <text class="modal-title">修改手机号</text>
      </view>

      <!-- 表单内容 -->
      <view class="modal-body">
        <u--form labelPosition="top" :model="formData" :rules="rules" ref="form">
          <u-form-item label="新手机号" prop="phone" borderBottom labelWidth="150" :label-style="{ color: '#fff' }">
            <u--input v-model="formData.phone" placeholder="请输入新手机号" border="none" maxlength="11" type="number"
              placeholderClass="placeholder-style" :custom-style="{ color: '#fff' }"></u--input>
          </u-form-item>

          <u-form-item label="验证码" prop="code" borderBottom labelWidth="150" :label-style="{ color: '#fff' }">
            <u--input v-model="formData.code" placeholder="请输入验证码" border="none" maxlength="6" type="number"
              placeholderClass="placeholder-style" :custom-style="{ color: '#fff' }"></u--input>
            <u-button slot="right" type="primary" size="mini" :disabled="codeDisabled" @click="sendCode" plain
              :custom-style="{
                color: 'black',
                borderColor: '#fff'
              }">
              {{ codeBtnText }}
            </u-button>
          </u-form-item>
        </u--form>
      </view>

      <!-- 操作按钮 -->
      <view class="modal-footer">
        <u-button type="default" shape="circle" @click="close" class="cancel-btn" :custom-style="{
          backgroundColor: 'rgba(255,255,255,0.2)',
          color: '#fff'
        }">
          取消
        </u-button>
        <u-button type="primary" shape="circle" @click="submit" class="confirm-btn" :loading="loading">
          确认修改
        </u-button>
      </view>
    </view>
  </u-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 背景图路径
    backgroundImage: {
      type: String,
      default: 'https://img.jingkakeji.com/img/static/huabanone.png'
    },
    // 遮罩层样式
    modalStyle: {
      type: Object,
      default: () => ({
        // backgroundColor: '#E7E4FD'
      })
    },
    // 背景容器样式
    bgContainerStyle: {
      type: Object,
      default: () => ({
        borderRadius: '12rpx',
        overflow: 'hidden'
      })
    },
    // 内容区域样式
    contentStyle: {
      type: Object,
      default: () => ({
        backgroundColor: 'https://img.jingkakeji.com/img/static/neirongs.png',
        borderRadius: '12rpx',
        padding: '40rpx',
        width: '600rpx',
        position: 'relative'
      })
    },
    // 是否点击遮罩层关闭
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formData: {
        phone: '',
        code: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            pattern: /^\d{6}$/,
            message: '验证码格式不正确',
            trigger: 'blur'
          }
        ]
      },
      codeDisabled: false,
      codeBtnText: '获取验证码',
      countdown: 60,
      timer: null,
      loading: false
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
      this.$emit('close')
      this.clearTimer()
    },

    sendCode() {
      this.$refs.form.validateField('phone', valid => {
        if (!valid) return

        this.codeDisabled = true
        this.startCountdown()

        // 模拟发送验证码
        uni.showLoading({ title: '发送中...' })
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({ title: '验证码已发送', icon: 'none' })
        }, 1000)
      })
    },

    startCountdown() {
      this.countdown = 60
      this.codeBtnText = `${this.countdown}s后重新获取`

      this.timer = setInterval(() => {
        this.countdown--
        this.codeBtnText = `${this.countdown}s后重新获取`

        if (this.countdown <= 0) {
          this.clearTimer()
          this.codeDisabled = false
          this.codeBtnText = '获取验证码'
        }
      }, 1000)
    },

    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },

    submit() {
      this.$refs.form.validate().then(valid => {
        if (valid) {
          this.loading = true

          // 模拟提交
          uni.showLoading({ title: '提交中...' })
          setTimeout(() => {
            this.loading = false
            uni.hideLoading()
            uni.showToast({ title: '修改成功', icon: 'success' })
            this.$emit('success', { ...this.formData })
            this.close()
          }, 1500)
        }
      })
    }
  },
  beforeDestroy() {
    this.clearTimer()
  }
}
</script>

<style lang="scss" scoped>
.modal-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-bg-image {
  width: 100%;
  height: 100%;
}

.modal-content {
  position: relative;
  z-index: 2;

  .close-icon {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    z-index: 3;
    padding: 10rpx;
  }

  .modal-header {
    text-align: center;
    margin-bottom: 40rpx;

    .modal-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
    }
  }

  .modal-body {
    margin-bottom: 40rpx;

    .placeholder-style {
      color: #ccc !important;
    }
  }

  .modal-footer {
    display: flex;
    justify-content: space-between;

    .cancel-btn {
      width: 48%;
    }

    .confirm-btn {
      width: 48%;
    }
  }

  .u-form-item {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8rpx;
    padding: 10rpx 20rpx;
    margin-bottom: 30rpx;

    .u-form-item__body {
      border-bottom: none !important;
    }
  }
}
</style>